/* app css stylesheet */

// -----
// @INTRO
// -----
.protectedIntroBody{
	margin-bottom: 50px;
}

.Private{display: none;}
// @end


// -------
// @EDITOR
// -------

.piEditor{
	margin-bottom: 100px;
	.hr{
		margin-top: 30px;
	}
	.well{
		form{
			margin:0;
		}
	}
	table tr td > div{
		margin-bottom:0;
		margin-top:0;
	}
	table tr td > div > input:first-child{
		margin-bottom:0;
	}
	// popup fix
	div.modal{
		z-index: 0;
		position: relative;
		left: 0;
		margin-left:0;
	}
}

// @end

/* @loader  */
.isViewLoading{
	font-family: @baseFontFamily;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 1;
	background-color: @grayLighter;
	
	h1 {
	  margin: 100px 0 20px 0;
	  font-family: @headingsFontFamily;
	  font-weight: @headingsFontWeight;
	  line-height: @baseLineHeight * 2;
	  font-size: @baseFontSize * 2.75;
	  text-align: center;
	  color: @headingsColor;
	  text-rendering: optimizelegibility; // Fix the character spacing for headings
	  text-shadow: 0 1px 2px @white;
	}
	
	.loader {
		position:relative;
		.square(100px);
		margin-right: auto;
		.border-radius(100px);
		.scale(0.5);
		margin-left: auto;
		margin-top: 50px;
		
		div {
		  .square(20px);
		  background:@black;
		  text-shadow: 0 1px 2px #F6F6F6;
		  position:absolute;
		  top:40px;
		  left:40px;
		  .border-radius(10px);
		}
	}
}

.bar1 {
  -moz-transform:rotate(0deg) translate(0, -40px);
  -webkit-transform:rotate(0deg) translate(0, -40px);
  opacity:0.12;
}
.bar2 {
  -moz-transform:rotate(45deg) translate(0, -40px);
  -webkit-transform:rotate(45deg) translate(0, -40px);
  opacity:0.25;
}
.bar3 {
  -moz-transform:rotate(90deg) translate(0, -40px);
  -webkit-transform:rotate(90deg) translate(0, -40px);
  opacity:0.37;
}
.bar4 {
  -moz-transform:rotate(135deg) translate(0, -40px);
  -webkit-transform:rotate(135deg) translate(0, -40px);
  opacity:0.50;
}
.bar5 {
  -moz-transform:rotate(180deg) translate(0, -40px);
  -webkit-transform:rotate(180deg) translate(0, -40px);
  opacity:0.62;
}
.bar6 {
  -moz-transform:rotate(225deg) translate(0, -40px);
  -webkit-transform:rotate(225deg) translate(0, -40px);
  opacity:0.75;
}
.bar7 {
  -moz-transform:rotate(270deg) translate(0, -40px);
  -webkit-transform:rotate(270deg) translate(0, -40px);
  opacity:0.87;
}
.bar8 {
  -moz-transform:rotate(315deg) translate(0, -40px);
  -webkit-transform:rotate(315deg) translate(0, -40px);
  opacity:1;
}

.loader {
  
  animation-name: rotateLoader;
  animation-duration:2s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  
  -webkit-animation-name: rotateLoader;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  
  -moz-animation-name: rotateLoader;
  -moz-animation-duration:2s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
 
}

@keyframes rotateLoader {
  from {-webkit-transform:scale(0.5) rotate(0deg);-moz-transform:scale(0.5) rotate(0deg);}
  to {-webkit-transform:scale(0.5) rotate(360deg);-moz-transform:scale(0.5) rotate(360deg);}
}

@-webkit-keyframes rotateLoader {
  from {-webkit-transform:scale(0.5) rotate(0deg);-moz-transform:scale(0.5) rotate(0deg);}
  to {-webkit-transform:scale(0.5) rotate(360deg);-moz-transform:scale(0.5) rotate(360deg);}
}

@-moz-keyframes rotateLoader {
  from {-webkit-transform:scale(0.5) rotate(0deg);-moz-transform:scale(0.5) rotate(0deg);}
  to {-webkit-transform:scale(0.5) rotate(360deg);-moz-transform:scale(0.5) rotate(360deg);}
}
/* @end */	

/* @DROPDOWN COLORPICKER */

div.colorpicker{
	min-width: 0;
	padding: 0;
	div.colorpicker-saturation{
		margin:4px;		
	}
	div.colorpicker-hue{
		margin:4px;
		margin-left:0;
	}
}

/* @end */


.groupNameTitle{
	color: @textColor;
	text-shadow: 0 1px 1px #F6F6F6;
}

.labelTitle{
	line-height: @baseLineHeight;
	font-size: 14px;
	font-weight: normal;
	color: @textColor;
	text-shadow: 0 1px 1px #F6F6F6;
}


.protected {
	font-family: @baseFontFamily;
	font-size: 14px;
	line-height: 20px;
	color: #333;
	
	a{
		color: @linkColor;
		&:hover {
			color: @linkColorHover;
		}
		
	}
	
	
	.introHeader{
		text-align: center;
		padding: 90px;
		border-bottom: 1px dashed @grayLighter;
	}
	
	.buttonsBlocks{
		.github{
			margin-top: 9px;
			display: block;
		}
	}
	
	.buttonsDiv{
		text-align: center;
		border-top: 1px dashed @grayLighter;
		margin-top: 45px;
		padding : 45px 0 0;
	}

	.centerTitle{
		text-align: center;
		padding : 45px 0;
	}	
	
	#menuBottom{
		background: @grayDarker;
		padding: 7px 0 10px;
		position: fixed;
		right: 0;
		left: 0;
		margin-bottom: 0;
		
		ul{
			list-style: none;
			width: 800px;
			margin: 0 auto;
			li{
				float: left;
				padding-right: 5px;
			}
		}	
		.sign{
			color: @grayLight;
			float: right;
			padding :7px;
		}
		
		.checkbox{
			color: @grayLight;
			padding-right: 10px;
			padding-top: 10px;
		
		}
	}
	
	[class^="icon-"], [class*=" icon-"] {
		vertical-align: middle;
		margin: 0 4px 4px 0;
	}
	
	.btn-large [class^="icon-"], .btn-large [class*=" icon-"] {
		margin-top: 0px;
	}
	
	.footer{
		background: @grayDarker;
		color: @grayLight;
		padding: 10px 0;
	}
	
	.colorShowDiv{
		margin-top: 5px;
			.colorShow{
			overflow: hidden;
			height: 50px;
			margin-bottom: 30px;
			#gradient > .vertical(#f5f5f5, #f9f9f9);
			.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
			.border-radius(@baseBorderRadius);
			.colorShowBar{
				  width: 100%;
				  height: 100%;
				  color: @white;
				  float: left;
				  font-size: 12px;
				  text-align: center;
				  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
				  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
				  .box-sizing(border-box);
				  .transition(width .6s ease);
			}
		}
	}


	// -------------------------
	// colorpicker
	// -------------------------
	.colorpicker{
		span.add-on{
			padding: 0;
			width: 28px;
			height: 28px;
			i{
				margin: -1px 0px 0px;
				width: 30px;
				height: 30px;
				z-index: 0;
				border-top-right-radius: @baseBorderRadius;
				border-bottom-right-radius: @baseBorderRadius;
				.box-shadow(inset 0px 0px 1px @grayLight);
				margin-left: -1px;
			}
		}
	}
	// @end


	// -------------------------
	// NAVBAR
	// -------------------------
	.navbar {
		overflow: visible;
		margin-bottom: @baseLineHeight;
		*position: relative;
		*z-index: 2;
		.navbar-inner {
			min-height: @navbarHeight;
			padding-left:  20px;
			padding-right: 20px;
			#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
			border: 1px solid @navbarBorder;
			.border-radius(@baseBorderRadius);
			.box-shadow(0 1px 4px rgba(0,0,0,.065));
		}
	}
	.navbar .brand {
		float: left;
		display: block;
		// Vertically center the text given @navbarHeight
		padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
		margin-left: -20px; // negative indent to left-align the text down the page
		font-size: 20px;
		font-weight: 200;
		color: @navbarBrandColor;
		text-shadow: 0 1px 0 @navbarBackgroundHighlight;
		&:hover {
			text-decoration: none;
		}
	}
	// Dividers in navbar
	// -------------------------
	.navbar .divider-vertical {
		height: @navbarHeight;
		margin: 0 9px;
		border-left: 1px solid @navbarBackground;
		border-right: 1px solid @navbarBackgroundHighlight;
	}


	// Static navbar
	// -------------------------

	.navbar-static-top {
		position: static;
		margin-bottom: 0; // remove 18px margin for default navbar
		.navbar-inner {
			.border-radius(0);
		}
	}
	.navbar-fixed-bottom {
		position: fixed;
		right: 0;
		left: 0;
		z-index: @zindexFixedNavbar;
		margin-bottom: 0; // remove 18px margin for default navbar
	}

	.navbar-static-top {
		.navbar-inner {
			.box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
		}
	}


	// ----------
	// NAVIGATION
	// ----------
	.navbar .nav {
		position: relative;
		left: 0;
		display: block;
		float: left;
		// margin: 0 10px 0 0;
		margin-right:10px;
	}

	.navbar .nav > li {
		float: left;
	}

	.navbar .nav > li > a {
		float: none;
		// Vertically center the text given @navbarHeight
		padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
		color: @navbarLinkColor;
		text-decoration: none;
		text-shadow: 0 1px 0 @navbarBackgroundHighlight;
	}
	.navbar .nav .dropdown-toggle .caret {
		margin-top: 8px;

	}

	// Hover
	.navbar .nav > li > a:focus,
	.navbar .nav > li > a:hover {
		background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
		color: @navbarLinkColorHover;
		text-decoration: none;
	}

	// Active nav items
	.navbar .nav > .active > a,
	.navbar .nav > .active > a:hover,
	.navbar .nav > .active > a:focus {
		color: @navbarLinkColorActive;
		text-decoration: none;
		background-color: @navbarLinkBackgroundActive;
		.box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
	}

	// Navbar button for toggling navbar items in responsive layouts
	// These definitions need to come after '.navbar .btn'
	.navbar .btn-navbar {
		display: none;
		float: right;
		padding: 7px 10px;
		margin-left: 5px;
		margin-right: 5px;
		.buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
		.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
	}
	.navbar .btn-navbar .icon-bar {
		display: block;
		width: 18px;
		height: 2px;
		background-color: #f5f5f5;
		.border-radius(1px);
		.box-shadow(0 1px 0 rgba(0,0,0,.25));
	}
	.btn-navbar .icon-bar + .icon-bar {
		margin-top: 3px;
	}
	.navbar-inverse {
		.navbar-inner {
			#gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
			border-color: @navbarInverseBorder;
		}
		.brand,
		.nav > li > a {
			color: @navbarInverseLinkColor;
			text-shadow: 0 -1px 0 rgba(0,0,0,.25);
			&:hover {
				color: @navbarInverseLinkColorHover;
			}
		}
		.brand {
			color: @navbarInverseBrandColor;
		}
		.nav > li > a:focus,
		.nav > li > a:hover {
			background-color: @navbarInverseLinkBackgroundHover;
			color: @navbarInverseLinkColorHover;
		}
		.nav .active > a,
		.nav .active > a:hover,
		.nav .active > a:focus {
			color: @navbarInverseLinkColorActive;
			background-color: @navbarInverseLinkBackgroundActive;
		}
		// Dividers in navbar
		.divider-vertical {
			border-left-color: @navbarInverseBackground;
			border-right-color: @navbarInverseBackgroundHighlight;
		}
		// Dropdowns
		.nav li.dropdown.open > .dropdown-toggle,
		.nav li.dropdown.active > .dropdown-toggle,
		.nav li.dropdown.open.active > .dropdown-toggle {
			background-color: @navbarInverseLinkBackgroundActive;
			color: @navbarInverseLinkColorActive;
		}
		.nav li.dropdown > a:hover .caret {
			border-top-color: @navbarInverseLinkColorActive;
			border-bottom-color: @navbarInverseLinkColorActive;
		}
		.nav li.dropdown > .dropdown-toggle .caret {
			border-top-color: @navbarInverseLinkColor;
			border-bottom-color: @navbarInverseLinkColor;
		}
		.nav li.dropdown.open > .dropdown-toggle .caret,
		.nav li.dropdown.active > .dropdown-toggle .caret,
		.nav li.dropdown.open.active > .dropdown-toggle .caret {
			border-top-color: @navbarInverseLinkColorActive;
			border-bottom-color: @navbarInverseLinkColorActive;
		}
	}


	// -------------------------
	// INPUTS
	// -------------------------

	input, button, select, textarea {
		font-family: @baseFontFamily;
		line-height: @baseLineHeight;
		font-size: @baseFontSize;
	}
	select,
	textarea,
	input[type="text"],
	input[type="password"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="date"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	input[type="number"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="tel"],
	input[type="color"],
	.uneditable-input {
		display: inline-block;
		height: @baseLineHeight;
		padding: 4px 6px;
		margin-bottom: @baseLineHeight / 2;
		font-size: @baseFontSize;
		line-height: @baseLineHeight;
		color: @gray;
		vertical-align: middle;
		border-top-left-radius: @baseBorderRadius;
		border-bottom-left-radius:@baseBorderRadius ;
	}

	// -------------------------
	// BUTTONS
	// -------------------------
	
	.btn {
		display: inline-block;
		.ie7-inline-block();
		padding: 4px 12px;
		margin-bottom: 0; // For input.btn
		font-size: @baseFontSize;
		line-height: @baseLineHeight;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
		border: 1px solid @btnBorder;
		*border: 0; // Remove the border to prevent IE7's black border on input:focus
		border-bottom-color: darken(@btnBorder, 10%);
		.border-radius(@baseBorderRadius);
		.ie7-restore-left-whitespace(); // Give IE7 some love
		.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");

		// Hover state
		&:hover {
			color: @grayDark;
			text-decoration: none;
			background-position: 0 -15px;

			// transition is only when going to hover, otherwise the background
			// behind the gradient (there for IE<=9 fallback) gets mismatched
			.transition(background-position .1s linear);
		}

		// Focus state for keyboard and accessibility
		&:focus {
			.tab-focus();
		}

		// Active state
		&.active,
		&:active {
			background-image: none;
			outline: 0;
			.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
		}

		// Disabled state
		&.disabled,
		&[disabled] {
			cursor: default;
			background-image: none;
			.opacity(65);
			.box-shadow(none);
		}
	}
	.btn-primary.active,
	.btn-warning.active,
	.btn-danger.active,
	.btn-success.active,
	.btn-info.active,
	.btn-inverse.active {
		color: rgba(255,255,255,.75);
	}
	.btn {
		border-color: #c5c5c5;
		border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
	}
	.btn-primary {
		.buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
	}
	// Warning appears are orange
	.btn-warning {
		.buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
	}
	// Danger and error appear as red
	.btn-danger {
		.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
	}
	// Success appears as green
	.btn-success {
		.buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
	}
	// Info appears as a neutral blue
	.btn-info {
		.buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
	}
	// Inverse appears as dark gray
	.btn-inverse {
		.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
	}


	

	// -------------------------
	// DROPDOWNS
	// -------------------------

	.dropup,
	.dropdown {
		position: relative;
	}
	.dropdown-toggle {
		// The caret makes the toggle a bit too tall in IE7
		*margin-bottom: -3px;
	}
	.dropdown-toggle:active,
	.open .dropdown-toggle {
		outline: 0;
	}

	.caret {
		display: inline-block;
		width: 0;
		height: 0;
		vertical-align: top;
		border-top:   4px solid @black;
		border-right: 4px solid transparent;
		border-left:  4px solid transparent;
		content: "";
	}

	// Place the caret
	.dropdown .caret {
		margin-top: 8px;
		margin-left: 2px;
	}

	// The dropdown menu (ul)
	// ----------------------
	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: @zindexDropdown;
		display: none; // none by default, but block on "open" of the menu
		float: left;
		min-width: 160px;
		padding: 5px 0;
		margin: 2px 0 0; // override default ul
		list-style: none;
		background-color: @dropdownBackground;
		border: 1px solid #ccc; // Fallback for IE7-8
		border: 1px solid @dropdownBorder;
		*border-right-width: 2px;
		*border-bottom-width: 2px;
		.border-radius(6px);
		.box-shadow(0 5px 10px rgba(0,0,0,.2));
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding;
		  background-clip: padding-box;

		// Aligns the dropdown menu to right
		&.pull-right {
			right: 0;
			left: auto;
		}

		// Dividers (basically an hr) within the dropdown
		.divider {
			.nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
		}

		// Links within the dropdown menu
		li > a {
			display: block;
			padding: 3px 20px;
			clear: both;
			font-weight: normal;
			line-height: @baseLineHeight;
			color: @dropdownLinkColor;
			white-space: nowrap;
		}
	}

	// Hover state
	// -----------
	.dropdown-menu li > a:hover,
	.dropdown-menu li > a:focus,
	.dropdown-submenu:hover > a {
		text-decoration: none;
		color: @dropdownLinkColorHover;
		#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
	}

	// Active state
	// ------------
	.dropdown-menu .active > a,
	.dropdown-menu .active > a:hover {
		color: @dropdownLinkColorActive;
		text-decoration: none;
		outline: 0;
		#gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
	}

	// Disabled state
	// --------------
	// Gray out text and ensure the hover state remains gray
	.dropdown-menu .disabled > a,
	.dropdown-menu .disabled > a:hover {
		color: @grayLight;
	}

	// Nuke hover effects
	.dropdown-menu .disabled > a:hover {
	text-decoration: none;
	background-color: transparent;
	background-image: none; // Remove CSS gradient
	.reset-filter();
	cursor: default;
	}

	.dropup,
	.dropdown {
		position: relative;
	}
	.dropdown-toggle {
		// The caret makes the toggle a bit too tall in IE7
		*margin-bottom: -3px;
	}
	.dropdown-toggle:active,
	.open .dropdown-toggle {
		outline: 0;
	}
	.dropdown-menu li > a {
		line-height: @baseLineHeight;

	}
	.caret {
		display: inline-block;
		width: 0;
		height: 0;
		vertical-align: top;
		border-top:   4px solid @black;
		border-right: 4px solid transparent;
		border-left:  4px solid transparent;
		content: "";
	}
	.dropdown .caret {
		margin-top: 8px;
		margin-left: 2px;
	}
	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: @zindexDropdown;
		display: none; // none by default, but block on "open" of the menu
		float: left;
		min-width: 160px;
		padding: 5px 0;
		margin: 2px 0 0; // override default ul
		list-style: none;
		background-color: @dropdownBackground;
		border: 1px solid #ccc; // Fallback for IE7-8
		border: 1px solid @dropdownBorder;
		*border-right-width: 2px;
		*border-bottom-width: 2px;
		.border-radius(6px);
		.box-shadow(0 5px 10px rgba(0,0,0,.2));
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding;
		  background-clip: padding-box;


		// Dividers (basically an hr) within the dropdown
		.divider {
			.nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
		}

		// Links within the dropdown menu
		li > a {
			display: block;
			padding: 3px 20px;
			clear: both;
			font-weight: normal;
			line-height: @baseLineHeight;
			color: @dropdownLinkColor;
			white-space: nowrap;
		}
	}


	.dropdown-menu li > a:hover,
	.dropdown-menu li > a:focus,
	.dropdown-submenu:hover > a {
		text-decoration: none;
		color: @dropdownLinkColorHover;
		#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
	}

	.dropdown-menu .active > a,
	.dropdown-menu .active > a:hover {
		color: @dropdownLinkColorActive;
		text-decoration: none;
		outline: 0;
		#gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
	}

	.dropdown-menu .disabled > a,
	.dropdown-menu .disabled > a:hover {
		color: @grayLight;
	}
	// Nuke hover effects
	.dropdown-menu .disabled > a:hover {
		text-decoration: none;
		background-color: transparent;
		background-image: none; // Remove CSS gradient
		.reset-filter();
		cursor: default;
	}




	// -------------------------
	// DROPDOWNS @ NAV
	// -------------------------
	.open {
		*z-index: @zindexDropdown;
		& > .dropdown-menu {
			display: block;
		}
	}

	.dropup,
	.navbar-fixed-bottom .dropdown {
		// Reverse the caret
		.caret {
			border-top: 0;
			border-bottom: 4px solid @black;
			content: "";
		}
		.dropdown-menu {
			top: auto;
			bottom: 100%;
			margin-bottom: 1px;
		}
	}
	.navbar .nav > li > .dropdown-menu {
		&:before {
			content: '';
			display: inline-block;
			border-left:   7px solid transparent;
			border-right:  7px solid transparent;
			border-bottom: 7px solid #ccc;
			border-bottom-color: @dropdownBorder;
			position: absolute;
			top: -7px;
			left: 9px;
		}
		&:after {
			content: '';
			display: inline-block;
			border-left:   6px solid transparent;
			border-right:  6px solid transparent;
			border-bottom: 6px solid @dropdownBackground;
			position: absolute;
			top: -6px;
			left: 10px;
		}
	}
	
}


@media (max-width: 767px) {
	body{
		padding: 0;
	}
	
	.container{
		padding-left: 20px;
		padding-right: 20px;
		
	}
	
}


@media (max-width: 979px) {

	.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
	    margin : 0px;
	    
	}
	

}

// TODO: apico icons variable (create new var for apico icons ?)
// TODO: colorpicker test 
// TODO: *PROD* set url for social button (prod url)



@import "pi.variables.less";
@import "pi.mixins.less";
@import "apico-sprites.less"; 
@import "colorpicker.less";